<!--
 * 角色 表单
 * :
 * @version: 1.0
 * @author: lakeside hubin_yuan.410@hotmail.com
 * @date: 20120-07-14
 * @LastEditors:
 * @LastEditTime:
 -->
<template>
  <el-form ref="roleForm" :disabled="!form.editable" :model="form.entry" :rules="form.editable?rules:{}"
           label-position="right"
           label-width="6rem">
    <el-row>
      <el-col :lg="12" :md="24">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.entry.roleName" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="角色编码" prop="code">
          <el-input v-model="form.entry.roleCode" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off" placeholder=""></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :lg="24" :md="24">
        <el-form-item label="资源权限" prop="permissions">
          <security-permission-chooser v-model="form.entry.permissions" :disabled="!form.editable" :readonly="!form.editable" checkStrictly
                                       containHalf
                                       data-mode="Object" multiple>
          </security-permission-chooser>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :lg="24" :md="24">
        <el-form-item label="关联用户" prop="users">
          <human-user-chooser v-model="form.entry.users" :disabled="!form.editable" :readonly="!form.editable" data-mode="Object"
                              multiple/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="!form.editable">
      <el-col :lg="12" :md="24">
        <el-form-item label="创建者" prop="createdByName">
          <el-input v-model="form.entry.createdByName" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off" placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="创建时间" prop="createdDate">
          <el-date-picker v-model="form.entry.createdDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="最后修改者" prop="modifiedByName">
          <el-input v-model="form.entry.modifiedByName" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off"
                    placeholder=""></el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="最后修改时间" prop="modifiedDate">
          <el-date-picker v-model="form.entry.modifiedDate" :disabled="!form.editable" :readonly="!form.editable" align="l"
                          format="yyyy-MM-dd HH:mm:ss"
                          placeholder="" type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :lg="24" :md="24">
        <el-form-item label="备注描述" prop="remarkNote">
          <el-input v-model="form.entry.remarkNote" :autosize="{minRows: 2}" :disabled="!form.editable" :readonly="!form.editable"
                    autocomplete="off"
                    placeholder="" type="textarea">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :md="24">
        <el-form-item label="有效状态" prop="validStatus">
          <dict-option-select v-model="form.entry.validStatus" :dictField="this.$constants.coreDict.validStatus.key" :disabled="!form.editable"
                              :readonly="!form.editable"
                              autocomplete="off" placeholder=""></dict-option-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import DictOptionSelect from "@/views/system/components/DictOptionSelect";
import SecurityPermissionChooser from "../../components/SecurityPermissionChooser";
import HumanUserChooser from "@/views/human/components/humanUserChooser";
import *  as securityRoleApi from '../../apis/role'

export default {
  name: "securityRoleForm",
  model: {
    prop: 'form',
  },
  props: {
    form: {type: Object},
  },
  components: {HumanUserChooser, SecurityPermissionChooser, DictOptionSelect},
  data() {
    return {
      rules: {
        name: [
          {required: true, message: '角色名称不能为空', trigger: ['blur', 'change']},
          {max: 50, message: '角色名称最大长度为50', trigger: ['blur', 'change']},
        ],
        code: [
          {max: 50, message: '角色编码最大长度为50', trigger: ['blur', 'change']},
        ],
      }
    }
  },
  mounted() {
    /*console.warn("role form mounted ")
    this.loadBaseData()*/
  },
  watch: {
    'form.entry.id': {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.loadBaseData()
      }
    }
  },
  methods: {
    loadBaseData() {
      if (this.form.entry.id) {
        //if (!this.form.entry['users']) {
          securityRoleApi.findUserId({id: this.form.entry.id},{},{keepCache:true}).then(response => {
            console.warn("role form load user")
            let {status, message, result} = response
            this.$set(this.form.entry, "users", result ? result.map(_id => {return {id: _id}}) : [])
          })
        //}
        //if (!this.form.entry['permissions']) {
          securityRoleApi.findPermissionId({id: this.form.entry.id},{},{keepCache:true}).then(response => {
            console.warn("role form load permission")
            let {status, message, result} = response
            this.$set(this.form.entry, "permissions", result? result.map(_id => {return {id: _id}}) : [])
          })
        //}
      }
    },
    /**表单校验回调*/
    async validate(callback) {
      return await this.$refs.roleForm.validate(callback)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>